<template>
  <!-- 学员信息 -->
  <div class="stu-info flex-column">
    <p v-if="list.length==0" style="position:absolute;top:45%;text-align:center;width:100%">还没有绑定学员</p>
    <p style="color: rgba(16, 16, 16, 0.65);font-size: 13px;margin-left:9px">已绑定学员</p>
    <div
      class="row-space-between list-items"
      v-for="(items,index) in list"
      :key="index"
      @click="stuDetail(items)"
    >
      <!-- 学员信息列表 -->
      <div>
        <!-- 左侧信息 -->
        <div class="row-align-center" style="font-size: 18px;color:rgba(16, 16, 16, 1);">
          <div style="width:60px;">{{items.studentName}}</div>
        </div>
        <p v-for="(item,index) in items.iteminfos" :key="index" style="margin:6px 0;">
          <span>{{item.campusName}}</span>
          <span v-if="item.className!=''" style="margin-left:20px;">{{item.className}}</span>
          <span v-if="item.purchasedCourses!=''" style="margin-left:20px;">{{item.purchasedCourses}}</span>
          <span style="margin-left:10px;">{{item.state}}</span>
        </p>
      </div>
      <!-- 右侧箭头 -->
      <van-icon name="arrow" />
    </div>
    <div style="height:50px;width:100%;" />
    <van-button style="position:fixed;bottom:0;width:100%;" color="#FF9900" @click="bindStuds">绑定学员</van-button>
  </div>
</template>

<script>
import { ShowStudents } from "@/api/personal";
import { mapGetters } from "vuex";
import { Toast } from "vant";
export default {
  data() {
    return {
      list: []
    };
  },
  methods: {
    // list-items点击跳转
    stuDetail(value) {
      value.studentID; //学员id
      value.iteminfos; //校区集合
      let list = [];
      value.iteminfos.forEach((item, index) => {
        list.push({
          text: item.campusName,
          value: item.campusID
        });
      });
      this.$router.push({
        name: "StuDetails",
        params: {
          studentID: value.studentID,
          from: "StudentInfo"
        }
      });
    },
    // 按钮跳转--绑定学员
    bindStuds() {
      this.$router.push("BindStuds");
    }
  },
  async created() {
    Toast.loading({ forbidClick: true, duration: 0 });
    const result = await ShowStudents({
      parentAccount: this.phone
    });
    if (result.result == "OK") {
      this.list = result.data;
    }
    Toast.clear();
  },
  computed: {
    ...mapGetters({ phone: "getPhone" })
  }
};
</script>

<style scoped>
.stu-info {
  /* position: absolute; */
  width: 100%;
  /* height: 100%; */
  background-color: #f7f7f7;
}
.list-items {
  border-radius: 8px;
  font-size: 13px;
  font-family: Arial;
  border: 1px solid rgba(255, 255, 255, 0);
  align-items: center;
  margin: 0 14px 14px 14px;
  background-color: #fff;
  padding: 10px 20px 4px 20px;
  color: rgba(16, 16, 16, 0.65);
}
.list-items:active {
  background-color: rgba(16, 16, 16, 0.05);
}
</style>